<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>首页</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp"/>
  <link rel="alternate icon" type="img/hengwang-1.png" href="img/hengwang-1.png">
  <link rel="stylesheet" href="css/amazeui.css"/>
  <link rel="stylesheet" href="css/style.css"/> 
  <script src="js/jquery.min.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/vue-ajax.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
            vueAjax("/get_navs","#navs");
            vueAjax("/get_aboutus","#aboutus");
            vueAjax("/get_contact",".contact");
            vueAjax("/get_navs","#footer");
        })
</script>
  <style type="text/css">
  /*解决vue页面数据加载时出现{{message}}闪烁现象*/
  [v-cloak]{
    display: none;
  }
 .pic{
  width: 100%;
  height: 230px;
  margin-top: 100px;
  background: url(img/banner1.jpg) center no-repeat;
 }
  </style>
</head>
<body>
<header class="am-topbar header">
	<div class="am-container-1">
		<div class="left hw-logo">
		  <img class=" logo" src="img/HENGWANG.png"></img>
		  <img class="word" src="img/hw-word.png"></img>
    </div>
  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
  </button>
<div class="am-collapse am-topbar-collapse right" id="doc-topbar-collapse">
  <div class=" am-topbar-left am-form-inline am-topbar-right" role="search" id="navs">
    <ul class="am-nav am-nav-pills am-topbar-nav hw-menu">
      <li v-cloak v-for="(item,index) in msg"><a v-bind:href="item.href">{{item.name}}</a></li>
    </ul>
  </div>
  </div>
  </div>
</header>
<div class="toppic">
	 <div class="am-container-1">
	 <div class="toppic-title left">
			<i class="am-icon-paper-plane toppic-title-i"></i>
			<span class="toppic-title-span">关于我们</span>
			<p>About Us</p>
		</div>
		<div class="right toppic-progress">
			<span><a href="index.html" class="w-white">首页</a></span>
			<i class=" am-icon-arrow-circle-right w-white"></i>
			<span><a href="about-us.html" class="w-white">关于我们</a></span>
		</div>
	</div>
</div>

<div class=" am-container-1">
	<div class="service-center" id="aboutus">
	    <ul class="service-ul">
	    	<li v-cloak v-for="(item,index) in msg" class="am-u-lg-12 am-u-md-12 am-u-sm-12">
	    		<div class="am-u-lg-7 am-u-md-7 am-u-sm-12 service-content">
	    			<h4 class="w-blue">{{item.name}}</h4>
	    			<p style="text-indent: 2em;">{{item.content}}</p>
	    		</div>
	    		<div class="am-u-lg-5 am-u-md-5 am-u-sm-12 service-img">
	    		   <img :src="'upload/'+item.src" />	
	    		</div>
	    	</li>
	    </ul>
	</div>
</div>

	

<div class=" am-container-1">
	<div class="part-title part-title-mar">
			<a href="customer-case.html">
			<i class=" am-icon-home part-title-i"></i>
			<span class="part-title-span">办公环境</span>
			<p>Office Space</p>
			</a>
		</div>
	<div class="office-space">
		<div class="cam-u-lg-6 am-u-md-6 am-u-sm-12">
			<img src="img/space-1.png"/>
		</div>
		<div class="cam-u-lg-3 am-u-md-3 am-u-sm-6">
			<img src="img/space-2.png"/>
		</div>
		<div class="cam-u-lg-3 am-u-md-3 am-u-sm-6">
			<img src="img/space-3.png"/>
		</div>
		<div class="cam-u-lg-3 am-u-md-3 am-u-sm-6">
			<img src="img/space-4.png"/>
		</div>
		<div class="cam-u-lg-3 am-u-md-3 am-u-sm-6">
			<img src="img/space-5.png"/>
		</div>
		<div class="clear"></div>
	</div>
	
</div>
</div>
<!-- 底部版权 -->
<footer class="footer ">
<ul>     
 <div class="contact">
        <li v-cloak v-for="(contact,index) in msg" class="am-u-lg-4 am-u-md-4 am-u-sm-12 part-5-li2" >
            <div class="part-5-title">公司名称：{{contact.company_name}}</div>
            <div class="part-5-words2">
                <span>地址:{{contact.address}}</span>
                <span>电话:{{contact.tel}}</span>
                <span>QQ号:{{contact.qq}}</span>
                <span>邮箱:{{contact.email}}</span>
                <span><i class="am-icon-phone"></i><em >{{contact.tel}}</em></span>
            </div>
        </li>
  </div> 
        <li class="am-u-lg-4 am-u-md-4 am-u-sm-12 ">
            <div class="part-5-title">相关链接</div>
            <div class="part-5-words2" id="footer">
                <ul class="part-5-words2-ul">
                    <li v-for="(item,index) in msg" class="am-u-lg-4 am-u-md-6 am-u-sm-4"><a v-bind:href="item.href"> {{item.name}} </a></li>
                    <div class="clear"></div>
                </ul>
            </div>
        </li>
        <div class="clear"></div>
    </ul> 
</footer>


</body>
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/amazeui.min.js"></script>
<!--[if (gte IE 9)|!(IE)]><!-->

</html>
